<template>
  <ul class="switches">
      <li class="switches-item" v-for="(item,index) in switches" :key = "index" :class="{'active':currentIndex === index}"  @click="switchItem(index)">
          <span>{{item.name}}</span>
      </li>
  </ul>
</template>

<script>
export default {
    props:{
        switches:{
            type:Array,
            default: function () {
                return []
            }
        },
        currentIndex:{
            type:Number,
            default:0
        }
    },
    methods:{
       switchItem(index) {
           console.log(index)
            this.$emit('switch',index)
        }
    }
    
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.switches
    display flex
    align-items center
    width 240px
    margin 0 auto
    border 1px solid $color-highlight-background
    // background-color $color-highlight-background
    border-radius 5px
    .switches-item
        flex 1
        padding 8px
        text-align center
        font-size $font-size-medium
        color $color-text-d
        &.active
            background: $color-highlight-background
            color: $color-text
</style>